<template>
  <div class="commovie">
        <div class="cover">
            <div class="left">近期最受期待</div>
            <div class="goods_files_list">
                <ul class="ul_top">
                    <li v-for="item in expect_arr" :key="item.id">
                        <img :src="item.img" alt="">
                        <span class="set_con">
                            {{item.nm}}
                        </span>
                        <span>{{item.comingTitle}}</span>
                        <div class="heart">
                          <span></span>
                        </div>
                        <div class="score"> <span>{{item.wish}}人想看</span></div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="commitem">
          <ul class="ul_bottom">
              <li v-for="(item,index) in expect_list" :key = "item.id">
                  <a href="#">
                      <div class="li-item">
                          <!-- <h2 v-if="index ==0 || arr[index].comingTitle != arr[index-1].comingTitle">{{item.comingTitle}}</h2> -->
                          <div style="text-align:left; margin-top:10px" v-if="index == 0 || expect_list[index].comingTitle !== expect_list[index-1].comingTitle">{{item.comingTitle}}</div>
                          <div class="content">
                              <img :src="item.img" alt="">
                              <div class="more_content">
                                  <div class="title_and_icon">
                                      <span class="title_content">{{item.nm}}</span>
                                  </div>
                                  
                                  <div class="more_content_see">
                                      <span><span class="person_num">{{item.wish}}</span>人想看</span>
                                      <span class="stars">主演：{{item.star}}</span>
                                      <span>{{item.rt}}上映</span>
                                  </div>
                              </div>
                              <button class="want" v-if="item.showStateButton" :style="{background:item.showStateButton.color}">{{item.showStateButton.content}}</button>
                              <button class="want" v-else>想看</button>
                          </div>
                      </div>
                  </a>
              </li>
          </ul>
        </div>
    </div>
   
</template>

<script>
import axios from 'axios'
export default {
  data(){
    return {
      expect_arr:[],
      expect_list:[]
    }
  },
  mounted(){
    axios.get('./json/new_films_data.json')
    .then((res)=>{
    //   console.log('获取期待的数据');
      this.expect_list = JSON.parse(JSON.stringify(res.data.coming))
      res.data.coming = res.data.coming.sort((a,b)=>{
         return b.wish - a.wish
      })
      this.expect_arr = res.data.coming
    //   console.log(this.expect_list);
    })
  }
}
</script>

<style lang="less" scoped>
    .commovie{
        width: 100%;
        height: 4.2667rem;
        // background-color: aliceblue;
        margin: auto;
        // padding-left: .2667rem;
        // padding-right: .2667rem;
        padding-top: 12px;
        padding-bottom: .64rem;
        background-color: #fff;
        border-bottom: 5px solid rgb(242, 242, 242);
        .cover{
            width: 94%;
            margin: auto;
            margin-bottom: 20px;
            background-color: #fff;
        }
        .left{
            margin: .2667rem 0;
            text-align: left;
            font-size: .4267rem;
        }
        .goods_files_list{
            width: 100%;
            .ul_top{
                text-decoration: none;
                display: flex;
                list-style: none;
                overflow: scroll;
                li{
                    width: 2.2667rem;
                    margin-right:.2667rem;
                    text-align: left;
                    position: relative;
                    img{
                        width: 2.2667rem;
                        height: 3.0667rem;
                    }
                    .set_con{
                        font-size: .3733rem;
                        font-weight: 600;
                        margin-top: .1333rem;
                        display: block;
                        overflow: hidden;
                        text-overflow:ellipsis;
                        white-space: nowrap;
                    }
                    .score{
                        position: absolute;
                        left: 0;
                        padding: .1333rem 0;
                        bottom: 26%;
                        font-weight: 600;
                        width:  2.2667rem;
                        color: rgb(250, 175, 0);
                        background-color: rgba(0,0,0,0.3);
                        span{
                          margin-left: 4px;
                        }
                        // background:-webkit-liner-gradient( black, white )
                    }
                }
            }
        }
    }

    .ul_bottom{
          list-style: none;
          display: flex;
          flex-direction: column;
      }
      .ul_bottom::after{
          content:"";
          display:block;
          height: 1.3867rem;
      }
      a{
          text-decoration: none;
          color: black;
      }

      h1,h2{
          font-size: .3733rem;
          font-weight: 400;
      }
    

      .li-item{
          padding: 0 .2667rem;
      }
      .content{
          width: 100%;
          margin-top: .2667rem;
          /* background-color: aqua; */
          display: flex;
          position: relative;
          /* align-items: center; */
          /* border-bottom: 1px solid black; */
      }
      .content img{
          width: 1.7067rem;
          height: 2.4rem;
          margin-top: 10px;
      }
      .more_content{
          width: 80%;
          height: 2.4rem;
          padding: 10px;
          font-size: .3733rem;
          text-align: left;
          color: rgb(137, 137, 137);
      }

      .heart{
        width: .7467rem;
        height: .7467rem;
        background-color: rgba(0, 0, 0, 0.5);
        position:absolute;
        left: 0;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom-right-radius: .2133rem;
        span{
          width: .2667rem;
          height: .2667rem;
          background:url("../../../assets/notWish.png") no-repeat;
          background-size: .2667rem;
        }
      }
      
      .more_content_see{
          display: flex;
          height: 1.8133rem;
          flex-direction: column;
          color: rgb(102, 102, 102);
          border-bottom: 1px solid rgb(240, 240, 240);
          /* margin-bottom: 2px; */
          /* justify-content: space-around; */
          padding-bottom: .2667rem;
      }
      /* .more_content_see span{
          margin-bottom: 10px;
      } */

      .title_content{
          font-size: .4267rem;
          font-weight: 700;
          color: black;
      }

      .more_content_see span:first-child{
          margin-top: 5px;
      }

      .person_num{
          font-size: 14px;
          color: rgb(250, 175, 0);
      }

      .want{
          position: absolute;
          right: 0;
          top: 50%;
          margin-top: -14px;
          background-color: rgb(250, 175, 0);
          // background-color: var(--background-color);
      }
      button{
          width: 52px;
          height: 28px;
          outline: none;
          border: none;
          border-radius: 18px;
          color: #fff;
          font-size: 12px;
      }
      .stars{
          width: 160px;
          height: 24px;
          line-height: 24px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
      }
</style>